<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge">
		<meta http-equiv="Content-Language" content="zh-cn">
		<meta name="applicable-device" content="pc">
		<title>豆咖音乐-播放器</title>
		<link rel="stylesheet" href="//y.gtimg.cn/mediastyle/yqq/player_0611.css?max_age=2592000&amp;v=20190611">

		<style id="tsbrowser_video_independent_player_style" type="text/css">
		</style>
		<style>
			.checkbox_item{
				box-shadow: none;
			}
			input[type=checkbox]{
				display: none;
			}
			input[type=checkbox]+label{
				width: 100%;
				height: 20px;
				display: inline-block;
				line-height: 20px;
				position: relative;
				text-align: center;
				font-size: 14px;
			}
			input[type=checkbox]+label:after{
				content: "";
				width: 15px;
				height: 15px;
				border: 1px solid #gainsboro;
				display: inline-block;
				position: relative;
				top: -3px;
			}
			input[type=checkbox]:checked+label:after{
				content: "\2713";
				color: white;
			}
			
			.player_logo__pic{
				width: 100px;
				height: 33px;
				position: absolute;
				left: -6px;
				top: -5px;
				
			}
			
			.song_info__lyric{
				height :200px;
				width: 340px;
				absolute;
				top:180px;
			}
			
		/* 	.aplayer-lrc:after,.aplayer-lrc:before {
	            position: absolute;
	            z-index: 1;
	            display: block;
	            overflow: hidden;
	            content: ' ';
	            width: 100%
        	} */
 
             .aplayer-lrc:before {
                top: 25px;
                height: 4%;
                background: -webkit-linear-gradient(top,#fff 0,rgba(255,255,255,0) 100%);
                background: -webkit-gradient(linear,left top,left bottom,from(white),to(rgba(255,255,255,0)));
                background: linear-gradient(to top,#fff 0,rgba(255,255,255,0) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0 )
            } 
            .aplayer-lrc-contents li.on{
				color: red;
			}
		
			.aplayer-lrc-contents li p{
				overflow: hidden;
				text-overflow: ellipsis;
				line-height: 16px;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				display: -webkit-box;
				text-align: center;
				margin-top: 0;
				margin-bottom: 16px;
			}
			#spanplayer_bgbar{
			 width :501px
			}
			
            #progress {
			    padding-top: 6px;
			    height: 8px;
			    cursor: pointer;
			    width :501px
			}
			
			.pictureSize{
		  		width:45px;
		  		height:45px;
		  		border: 1px solid white;
		  		border-radius: 30px;
		  		margin-top:5px;
  			}
  			.btn_comment99{
  				position: absolute;
  				right:280px;
  			}
		</style>
		<link rel="stylesheet" type="text/css" href="//stdl.qq.com/stdl/qqbrowser/floatlayer/css/qb-ie-remind.css?1592271801115">

		<script charset="utf-8" src="//stdl.qq.com/stdl/qb/js/qblog.js?1592271801114"></script>
	</head>

	<body onunload="document.cookie='yplayer_open=0;path=/;domain=y.qq.com;'" class="os_mac" style="background-color: rgb(224, 224, 224);">
		<h1 class="player_logo">
	<!--左上角logo-->
	<a href="//y.qq.com/#stat=y_new.player.header.logo" rel="noopener" target="_blank">
		<img class="player_logo__pic" src="img/douka.png" alt="豆咖音乐"></a></h1>
		<div class="mod_player_login">
			<span id="player_login" style="display:none;">
		<a class="player_login__link" href="javascripr:;">
		</a>
		<a href="javascript:;" class="player_login__out js_logout" data-stat="y_new.player.header.logout">退出</a>
	</span>
			<a class="player_login__link player_login__link--unlogin js_login" href="javascript:;" id="loginAccount">
				<span class="player_login__txt" >登录</span>
			</a>
		</div>

		<div class="mod_player">
			<div class="player__hd"></div>
			<div class="player__bd">
				<!-- 默认 -->
				<div class="player_style_normal js_box js_full_box" style="display:;">
					<div class="mod_songlist_toolbar">
						<a href="javascript:;" class="mod_btn js_all_like" id="collectTag"><i class="mod_btn_green__icon_like"></i>收藏<span class="mod_btn__border"></span></a>
						<a href="javascript:;" class="mod_btn js_all_down" ><i class="mod_btn_green__icon_down"></i>下载<span class="mod_btn__border"></span></a>
						<a href="javascript:;" class="mod_btn js_all_delete deletePlaySong" ><i class="mod_btn_green__icon_delete"></i>删除<span class="mod_btn__border"></span></a>
						<a href="javascript:;" class="mod_btn js_all_deleted deleteAllPlayList" ><i class="mod_btn_green__icon_clear"></i>清空列表<span class="mod_btn__border"></span></a>
					</div>
					<div class="sb_scrollable sb_main sb_viewport">

						<!-- 主要内容_S -->
						<div class="sb_overview" style="height: 272px;">

							<!-- 编辑模式 mod_songlist--edit -->
							<div class="mod_songlist mod_songlist--edit">
								<i class="player_songlist__line"></i>
								<ul class="songlist__header" id="songListUl">
									<li class="songlist__edit sprite">
										<input type="checkbox" class="songlist__checkbox js_check_all" id="checked0">
										<label for="checked0"></label>
									</li>
									<li class="songlist__header_name">歌曲</li>
									<li class="songlist__header_author">歌手</li>
									<li class="songlist__header_time">时长</li>
								</ul>
								<i class="player_songlist__line"></i>
								<ul class="songlist__list" id="song_box">
									
								</ul>
							</div>
						</div>
						<!-- 主要内容_E -->
						<!-- 模拟滚动条 S -->
						<div class="scroll_area sb vertical" style="display:none;">
							<div class="scroll_bg sb_bg">
								<div class="scroll_bg_cont sb_bg_cont"></div>
							</div>
							<div class="scroll_bar sb_thumb" style="height:0px;">
								<div class="scroll_bar_cont sb_thumb_cont" style="height:0px;"></div>
							</div>
						</div>
						<!-- 模拟滚动条 E -->
					</div>

					<div class="mod_song_info" id="song_info">
						<div class="song_info__info">
							<a href="javascirpt:;" class="song_info__cover js_album" data-stat="y_new.player.info_area.albumpic">
								<img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000003ClOrj1VP7eg.jpg?max_age=2592000" id="singer_pic" class="song_info__pic">
							</a>
						</div>
						<div class="song_info__lyric">
							<div class="aplayer-lrc">
								<ul id="lrclist" class="aplayer-lrc-contents" style="transform: translateY(0px);"><!-- 保证歌词在正中间 -->
								</ul>
							</div>
					</div>
					</div>
				</div>

			</div>
			<div class="player__ft" id="opbanner">
				<a href="javascript:;" class="btn_big_prev" id="peveSong"><span class="icon_txt">上一首</span></a>
				<a href="javascript:;" class="btn_big_play" id="btnplay">
				<span class="icon_txt">播放</span></a>
				<a href="javascript:;" class="btn_big_next" id="nextSong"><span class="icon_txt">下一首</span></a>
				<div class="player_music">
					<div class="player_music__info" id="sim_song_info">
						<input type="hidden" id="playSongId">
						<span class="js_song" id="songNameLabel">暂无歌曲</span><span>  /</span>
						<span class="js_singer" id="singerNameLabel"></span>
					</div>
					<div class="player_music__time" id="time_show"><span id="nowTime">00:00</span>/<span id="totalTime">00:00</span></div>
					<!-- 进度条 -->
					<div class="player_progress" id="progress">
						<div class="player_progress__inner" id="spanplayer_bgbar">
							<div class="player_progress__load" id="downloadbar" style="width: 50%;"></div>
							<div class="player_progress__play" style="width:0%;" id="spanplaybar">
							<i class="player_progress__dot" id="spanprogress_op"></i>
							</div>
						</div>
					</div>
				</div>
				<div>
					<!--播放模式，待修改-->
					<a href="javascript:;" class="btn_big_style_list" id="play_mod"><span class="icon_txt">列表循环</span></a>
				</div>
				<a href="javascript:;" class="btn_big_like js_btn_fav" title="喜欢" id="collectSong"><span class="icon_txt">喜欢</span></a>
				<a class="mod_btn_comment js_into_comment btn_comment99" href="#" id="commentBtn">
				<span class="btn_comment__numbers"><i class="btn_comment__numb btn_comment__numb_9"></i>
				<i class="btn_comment__numb btn_comment__numb_9"></i><i class="btn_comment__numb btn_comment__numb_9"></i>
				<i class="btn_comment__numb btn_comment__numb_add"></i></span><span class="icon_txt">评论</span></a>
				<div class="player_progress player_voice" id="voice">
					<a href="javascript:;" class="btn_big_voice" id="spanmute" title="关闭声音[M]"><span class="icon_txt">关闭声音[M]</span></a>
					<!-- <a href="javascript:;" class="btn_big_voice btn_big_voice--no"><span class="icon_txt">打开声音</span></a> -->
					<div class="player_progress__inner" id="spanvolume" title="调节音量 [增大alt+↑][减小alt+↓]">
						<div class="player_progress__play" style="width: 46px;" id="spanvolumebar"><i class="player_progress__dot" id="spanvolumeop"></i></div>
					</div>
				</div>
			</div>
		</div>

		<div class="bg_player_mask"></div>
		<div class="bg_player" style="background-image: url(&quot;https://y.gtimg.cn/music/photo_new/T002R300x300M000003ClOrj1VP7eg.jpg?max_age=2592000&quot;);" id="backImg"></div>
		<script src="${pageContext.request.contextPath}/front/js/jquery-3.5.1.js"></script>
	
		<script type="text/javascript">
	
			/* var loginAccount = "${sessionScope.loginAccount}"; */
			/* var accountId = "${sessionScope.loginAccount.accountId}"; */
			var collectionFlag1 = false;
			var accountId = 10;
		 	var loginAccount = {
					accountId : "10",
					accountTel : "17519485014",
					accountPwd : "123456",
					accountPicture : "",
					vipStatus : "0"
			}; 
			//播放页面进来默认显示播放列表
			$(document).ready(function(){
				//登录后才可以看到播放列表
		 		if (loginAccount != "") {
					if ("${sessionScope.loginAccount.accountPicture}"=="") {
						 $("#loginAccount").empty(); 
						 $("#loginAccount").append("<img id=\"faceImg\" class=\"pictureSize\" src=\"${pageContext.request.contextPath}/front/img/adminpicture.jpg\"/>");
						 showPlayList();
					
					}else {
						 $("#loginAccount").empty(); 
						 $("#loginAccount").append("<img id=\"faceImg\" class=\"pictureSize\" src=\"${pageContext.request.contextPath}/FileDownloadServlet?fileName=images/${sessionScope.loginAccount.accountPicture}\"/>");
					} 
				 } 
		 		
		 		
		 		var countSelect = 0;
		 		//复选框操作
				$(document).on("click","#checked0",function(){
					var allChecked = $(this).prop("checked");
					$(".songSelect").prop("checked",allChecked);
				});
			
				//单选框操作
				$(document).on("click",".songSelect",function(){
					var allSongChecked = $("#checked0");
					var singerChecked = $(".songSelect");
					flag = true;
					for (var i = 0; i < singerChecked.length; i++) {
						if ($(singerChecked[i]).prop("checked")==false) {
							flag = false;
							break;
						}
					}
					allSongChecked.prop("checked",flag);
				});
				
			})
			
			//显示播放列表方法
		 		function showPlayList() {
				var audio = $("#audio")[0];
		 			$.ajax({
						async:true,
						url:"${pageContext.request.contextPath}/SongServlet",
						type:"post",
						data:{op:"playListShow",accountId:accountId},
						dataType:"json",
						success:function(result,status,xhr){
							$("#song_box").empty();
							if (result!="") {
								for (var i = 0; i < result.length; i++) {
									$("#song_box").append("<li><div class=\"songlist__item\">"+
											" <div class=\"songlist__edit sprite\" >"+
											" <input type=\"checkbox\" class=\"songlist__checkbox songSelect\" id=checked"+(i+1)+">"+
											" <label for=checked"+(i+1)+"></label></div>"+
											" <div class=\"songlist__number songListId \">"+(i+1)+"</div><div class=\"songlist__songname\">"+
											" <input type=\"hidden\" class=\"songId\" value="+result[i].songId+">"+
											" <span class=\"songlist__songname_txt\">"+result[i].songName+"</span><div class=\"mod_list_menu\">"+
											" <a href=\"javascript:;\" class=\"list_menu__item list_menu__play js_play btnplay\">"+
											" <i class=\"list_menu__icon_play\"></i><span class=\"icon_txt\">播放</span></a>"+
											" </div></div><div class=\"songlist__artist\">"+result[i].singer.singerName+"</div>"+
											" <div class=\"songlist__time\">"+result[i].songTime+"</div><div class=\"songlist__other\"></div>"+
											" <a href=\"javascript:;\" class=\"songlist__delete js_delete deleteSingleSong\"><span class=\"icon_txt\">删除</span></a>"+
											" <i class=\"player_songlist__line\"></i></div></li>");
									}
									//修改进度条上方歌曲名
									$("#songNameLabel").text(result[0].songName);
									//修改歌曲名前的隐藏类型id
									$("#playSongId").val(result[0].songId);
									//修改进度条上方歌手名
									$("#singerNameLabel").text(result[0].singer.singerName);
									//获取当前歌曲总时长
									$("#totalTime").text(result[0].songTime);
									audio.src="${pageContext.request.contextPath}/FileDownloadServlet?fileName=music/"+result[0].songName+".mp3";
									//显示歌手图片
									$("#singer_pic").prop("src","${pageContext.request.contextPath}/FileDownloadServlet?fileName=images/"+result[0].singer.singerPicture)
									//显示第一首歌词
									getLRC(result[0].songText);
									//页面加载判断第一首歌是否收藏过
									$.ajax({
										async:true,
										url:"${pageContext.request.contextPath}/CollectServlet",
										type:"post",
										data:{op:"getCollectList",songName:result[0].songName,accountId:accountId},
										dataType:"text",
										success:function(result,status,xhr){
											if ("yes"==result) {
												collectionFlag1 = true;
												$("#collectSong").addClass("btn_big_like--like");
												
											}else if("no"==result) {
												$("#collectSong").removeClass("btn_big_like--like");
												collectionFlag1=false;
											}
										},
										error:function(xhr,status,error){
											alert("ajax异步请求失败");
										}
									});
							}
						},
						error:function(xhr,status,error){
							alert("ajax异步请求失败");
						}
					});
				}
			
			//歌曲后面播放按钮
			$(document).on("click",".btnplay",function(){
				//获取当前歌曲名
				var name = $(this).parent().prev().text();
				var id = $(this).parent().prev().prev().val();
				getMusic(id);
				//判断是不是被收藏过
				$.ajax({
					async:true,
					url:"${pageContext.request.contextPath}/CollectServlet",
					type:"post",
					data:{op:"getCollectList",songName:name,accountId:accountId},
					dataType:"text",
					success:function(result,status,xhr){
						if ("yes"==result) {
							/* $(this).parent().prev() */
							$("#collectSong").addClass("btn_big_like--like");
							collectionFlag1 = true;
						}else if("no"==result) {
							$("#collectSong").removeClass("btn_big_like--like");
							collectionFlag1 = false;
						}
					},
					error:function(xhr,status,error){
						alert("ajax异步请求失败");
					}
				});
			})
			
			//上一首按钮
			$("#peveSong").click(function(){
				var nowSongId = $("#playSongId").val();
				var songListId = $(".songId");
				
				for(var i = 0;i < songListId.length;i++){
					var songId = $(songListId[i]).val();
				 	if (nowSongId == songId) {
						if(i>0){
							var prevSongId = $(songListId[i-1]).val();
							getMusic(prevSongId);
						}
					} 
				}
			})
			
			//下一首
			$("#nextSong").click(function(){
				var nowSongId = $("#playSongId").val();
				var songListId = $(".songId");
				for(var i = 0;i < songListId.length;i++){
					var songId = $(songListId[i]).val();
				 	if (nowSongId == songId) {
						if(i<songListId.length-1){
							var nextSongId = $(songListId[i+1]).val();
							getMusic(nextSongId);
						}
					} 
				}
			})
			
			//当前播放时间
			function getNowTime(){
				var audio = $("#audio")[0];
				var currentTime = audio.currentTime; 
				var minute = parseInt(currentTime / 60);
				var second = parseInt(currentTime % 60);
			    if(minute < 10){
			    	minute = "0"+minute;
			    }
			    if(second<10){
			    	second = "0"+second;
			    }
			    currentTime = minute+":"+second;
			    
				$("#nowTime").text(currentTime)
			}
			
			//播放时间随歌曲变化而变化
			function getBar() {
				var downloadbar = $("#downloadbar");	    
				var spanplaybar =  $("#spanplaybar");
				var audio = $("#audio")[0];
				var totalTime = $("#totalTime").text();
				var allTime = changeTime(totalTime);
				var currentTime = audio.currentTime;
				var px = (501/allTime)*currentTime;
				/* var time = changeTime(nowTime); */
			    downloadbar.css("width",px +"px");
	            spanplaybar.css("left",px + "px");
	            
	            if(audio.paused){
					$("#btnplay").removeClass("btn_big_play--pause");
					$("#btnplay").addClass("btn_big_play");
					/*  audio.currentTime = 0;
					 downloadbar.css("width","0px");
			         spanplaybar.css("left","0px"); */
	            }
			}
			
			//播放时间随进度条和歌曲时间变化
			function updateNowTime(){
				setInterval("getNowTime()", 1000);
				setInterval("getBar()", 1000);
			}
			
			//发送ajax获取歌曲信息方法
			function getMusic(songId){
				$.ajax({
					async:true,
					url:"${pageContext.request.contextPath}/SongServlet",
					type:"post",
					data:{op:"getSongDetail",songId:songId},
					dataType:"json",
					success:function(result,status,xhr){
						playPause(result);
					},
					error:function(xhr,status,error){
						alert("ajax异步请求失败");
					}
				});
			}
			
			//处理播放,暂停or播放，渲染播放栏页面
			function playPause(result){
				//修改进度条上方歌曲名
				$("#songNameLabel").text(result.songName);
				//修改歌曲名前的隐藏类型id
				$("#playSongId").val(result.songId);
				//修改进度条上方歌手名
				$("#singerNameLabel").text(result.singer.singerName);
				//修改右边歌手图片
				$("#singer_pic").prop("src","${pageContext.request.contextPath}/FileDownloadServlet?fileName=images/"+result.singer.singerPicture)
				//设置歌曲总时长
				$("#totalTime").text(result.songTime);
				var audio = $("#audio")[0];
				downloadbar.css("width","0px");
	            spanplaybar.css("left","0px");
	            audio.currentTime = 0; 
				if(audio.paused){
					audio.src="${pageContext.request.contextPath}/FileDownloadServlet?fileName=music/"+result.songName+".mp3";
					//显示歌词
					getLRC(result.songText);
					audio.play();
					updateNowTime();
					$("#btnplay").addClass("btn_big_play--pause")
					}else if(!audio.paused) {
						audio.pause();
						$("#btnplay").removeClass("btn_big_play--pause")
						$("#btnplay").addClass("btn_big_play")
					}
			}
			
			//播放进度条拖动
			 	var downloadbar = $("#downloadbar");	    
				var spanplaybar =  $("#spanplaybar");
				var progress = $("#progress")
				var nowtime = $("#nowTime");
				var audio = $("#audio")[0];
				var barleft = 0; 
				//按住进度条按钮事件
				$("#spanplaybar").on("mousedown",function(event){
				
				    var event = event || window.event;
				    var leftVal = event.clientX - this.offsetLeft;//进度按钮距离最左边的长度
			      	//拖动
			    $(document).on("mousemove",function(event){
			    	 var a = downloadbar.css("width");
				    var b = spanplaybar.css("left");
			        var event = event || window.event;
			        barleft = event.clientX - leftVal;
			        if(barleft < 0){
				        barleft = 0;
			        }
			        else if(barleft > progress[0].offsetWidth - spanplaybar[0].offsetWidth)
			        barleft = progress[0].offsetWidth - spanplaybar[0].offsetWidth;
			        downloadbar.css("width",barleft +"px");
			        spanplaybar.css("left",barleft + "px");
			        var percent = barleft/(progress[0].offsetWidth-spanplaybar[0].offsetWidth);//占总进度条的百分比
			        var totaltime = $("#totalTime").text();//获取歌曲总时间00:00格式
			        var total = changeTime(totaltime);//获取当前歌曲总时间秒格式
			        var all =  percent*total;//当前时间占总时间的秒数
			        //秒数转换成00:00
			        var minute = parseInt(all / 60);
					var second = parseInt(all % 60);
					if(minute < 10){
						minute = "0"+minute;
					}
					if(second<10){
						second = "0"+second;
					}
					var all1 = minute+":"+second;
					nowtime.text(all1);
					var audio = $("#audio")[0];
					audio.currentTime = all; 
					audio.play();
					updateNowTime();
					/*  if(audio.paused){
							$("#btnplay").removeClass("btn_big_play--pause");
							$("#btnplay").addClass("btn_big_play");
				
			         }
					 if (percent==1) {
						 downloadbar.css("width","0px");
					     spanplaybar.css("left","0px");
					} */
					$("#btnplay").addClass("btn_big_play--pause");
					window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
			        })
			    });
			    //
			 /*    $("#spanplaybar").mouseup(function(){
			    	
			    	$(document).off("mousemove");
			    }) */
			    
			    			
			//下方播放按钮（修复）
			$(document).on("click","#btnplay",function(){
				
				var audio = $("#audio")[0];
				var nowSong = $("#songNameLabel").text();
/* 				const time = $("#nowTime").text();
				var a = downloadbar[0].offsetWidth;
				const time1 = changeTime(time);
				audio.currentTime = time1; */
				/* console.log(time1) */
				if(audio.paused){
			/* 		downloadbar.css("width",a);
				   	spanplaybar.css("left",a); */
				   	audio.play();
				  /*  	downloadbar.css("width",a);
				   	spanplaybar.css("left",a); */
					updateNowTime();
					$("#btnplay").addClass("btn_big_play--pause");
					}else if(!audio.paused) {
					/* 	downloadbar.css("width",a);
					   	spanplaybar.css("left",a); */
						audio.pause();
						/* downloadbar.css("width",a);
					   	spanplaybar.css("left",a); */
						$("#btnplay").removeClass("btn_big_play--pause");
						$("#btnplay").addClass("btn_big_play");
					}
			})
			    
				 var mutedFlag = true;
			    //是否静音
			    $("#spanmute").click(function(){
			    	var audio = $("#audio")[0];
			     	if (mutedFlag==true) {
			    		audio.muted = true;
			    		$(this).addClass("btn_big_voice--no");
			    		mutedFlag = false;
					}else if(mutedFlag==false) {
						audio.muted = false;
						$(this).removeClass("btn_big_voice--no")
						mutedFlag = true;
					} 
			    })
			    
			    //音量控制条
				var spanvolumeop = $("#spanvolumeop");
				var spanvolumebar = $("#spanvolumebar");
				var spanvolume = $("#spanvolume");
				    
				spanvolumebar.on("mousedown",function(event){
				    var barleft = 0;
				    var event = event || window.event;
				    var leftVal = event.clientX - this.offsetLeft;//进度按钮距离最左边的长度
				    //按住拖动
				    $(document).on("mousemove",function(event){
				        var event = event || window.event;
				        barleft = event.clientX - leftVal;
				        if(barleft < 0)
				        	barleft = 0;
				        else if(barleft > spanvolume[0].offsetWidth - spanvolumeop[0].offsetWidth)
				             barleft = spanvolume[0].offsetWidth - spanvolumeop[0].offsetWidth;
				             spanvolumebar.css("width",barleft +"px");
				             spanvolumeop.css("left",barleft + "px");
				             window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
				             var percent = barleft/(spanvolume[0].offsetWidth-spanvolumeop[0].offsetWidth);//占总进度条的百分比
				             //音量随着进度条百分比改变
				             var audio = $("#audio")[0];
				             audio.volume = percent;
				        }) 
				    });
					$(document).mouseup(function(){
				    	$(document).off("mousemove");
				    })	
				
				
				//设置标杆判断播放方式
				var flag = "one";
				//播放方式切换
				$(document).on("click","#play_mod",function(){
					var audio = $("#audio")[0];
					//one>列表循环，two>随机播放，three>单曲循环
					var playStyle = $(this);
					if (flag=="one") {
						$(this).addClass("btn_big_style_random");
						$(this).removeClass("btn_big_style_list");
						playStyle.children().text("随机播放");
						flag = "two";
					}else if (flag=="two") {
						//修改为单曲循环
						$(this).removeClass("btn_big_style_random");
						$(this).addClass("btn_big_style_single");
						playStyle.children().text("单曲循环");
						flag = "three";
						var currentSrc = audio.currentSrc;
						audio.src=currentSrc;
						audio.loop = true;
						
					}else if (flag=="three") {
						$(this).removeClass("btn_big_style_single");
						$(this).addClass("btn_big_style_list");
						playStyle.children("span").text("列表循环");
						flag = "one";
					}
				})
				
			    //获取总时间00:00转换成总秒数
			    function changeTime(totaltime){
			    	totaltime = totaltime;
			    	var time = totaltime.split(":");
			    	var m = parseInt(time[0])*60;
			    	var s = parseInt(time[1]);
			    	var total = m+s;
			    	return total;
			    }
				
				//播放栏右边收藏
				$("#collectSong").click(function(){
					var songName = $("#songNameLabel").text();
					/* var accountId = "${sessionScope.loginAccount.accountId}"; */
					var songId = $("#playSongId").val();
					if (collectionFlag1==false) {
						var op = "addMulitCollect";
						var songList =[];
							var data = {
									songId:songId,
									songName:songName,
									songTime:null,
									clickCount:null,
									songStatus:null,
									songType:null,
									singer:null,
									songText:null,
									publishDate:null
							};
							songList.push(data);
							collectSong(songList,op);
							
					}else if (collectionFlag1==true) {
						$.ajax({
							async:true,
							url:"${pageContext.request.contextPath}/CollectServlet",
							type:"post",
							data:{op:"deleteCollect",songId:songId,accountId:accountId},
							dataType:"text",
							success:function(result,status,xhr){
								if ("yes"==result) {
									$("#collectSong").removeClass("btn_big_like--like");
								}
							},
							error:function(xhr,status,error){
								alert("ajax异步请求失败");
							}
						});
						collectionFlag1=false;
					}
				})
				
				//上方收藏按钮
				$("#collectTag").click(function() {
					var songListSong = $(".songSelect:checked");
					var op = "addMulitCollect";
					if (songListSong.length==0) {
						alert("未选中歌曲")
					}else {
						var songList =[];
						for (var i = 0; i < songListSong.length; i++) {
							var songName = $(songListSong[i]).parent().next().next().children("span").text();
							var songId = $(songListSong[i]).parent().next().next().children("input").val();
							var data = {
									songId:songId,
									songName:songName,
									songTime:null,
									clickCount:null,
									songStatus:null,
									songType:null,
									singer:null,
									songText:null,
									publishDate:null
							};
							songList.push(data);
						}
						/* var accountId = "${sessionScope.loginAccount.accountId}"; */
							collectSong(songList,op);
					}
					
				})
				
				//收藏歌曲发送ajax方法
					function collectSong(songList,op) {
						/* var accountId = "${sessionScope.loginAccount.accountId}"; */
							$.ajax({
								async:true,
								url:"${pageContext.request.contextPath}/CollectServlet",
								type:"post",
								data:{op:op,song:JSON.stringify(songList),accountId:accountId},
								dataType:"text",
								success:function(result,status,xhr){
									if ("no"==result) {
										alert("收藏失败")
									}else{
										alert("收藏成功")
										$("#collectSong").addClass("btn_big_like--like");
										collectionFlag1=true;
									}
								},
								error:function(xhr,status,error){
									alert("ajax异步请求失败");
								}
							});
						}
				
				//删除选中的播放列表歌曲（上方删除按钮）
				$(".deletePlaySong").click(function(){
					var songListSong = $(".songSelect:checked");
					var op = "deleteMulitPlaySong";
					if (songListSong.length==0) {
						alert("未选中歌曲")
					}else {
						var songList =[];
						for (var i = 0; i < songListSong.length; i++) {
							var songName = $(songListSong[i]).parent().next().next().children("span").text();
							var songId = $(songListSong[i]).parent().next().next().children("input").val();
							var data = {
									songId:songId,
									songName:songName,
									songTime:null,
									clickCount:null,
									songStatus:null,
									songType:null,
									singer:null,
									songText:null,
									publishDate:null
							};
							songList.push(data);
						}
						/* var accountId = "${sessionScope.loginAccount.accountId}"; */
						removePlayList(songList,op);
					}
				})
				
				//歌曲后面删除播放列表歌曲按钮
					$(document).on("click",".deleteSingleSong",function(){
							var songName = $(this).siblings(".songlist__songname").children("span").text();
							var songId = $(this).siblings(".songlist__songname").children("input").val();
							var op = "deleteMulitPlaySong";
							var songList =[];
							var data = {
									songId:songId,
									songName:songName,
									songTime:null,
									clickCount:null,
									songStatus:null,
									songType:null,
									singer:null,
									songText:null,
									publishDate:null
							};
							songList.push(data)
							/* var accountId = "${sessionScope.loginAccount.accountId}"; */
							removePlayList(songList,op);
						})
						
				//移除播放列表事件发送ajax
				function removePlayList(songList,op) {
					
						/* var accountId = "${sessionScope.loginAccount.accountId}"; */
					$.ajax({
							async:true,
							url:"${pageContext.request.contextPath}/PlayListServlet",
							type:"post",
							data:{op:op,song:JSON.stringify(songList),accountId:accountId},
							dataType:"text",
							success:function(result,status,xhr){
								if ("yes"==result) {
									alert("成功");
									showPlayList();
								}else{
									alert("失败")
									}
								},
								error:function(xhr,status,error){
									alert("ajax异步请求失败");
								}
							});
						}
						
					
				//清空列表
					$(".deleteAllPlayList").click(function() {
						if (confirm("是否清空播放列表？")) {
							var songNameList = $(".songlist__songname_txt");
							var songIdList = $(".songId");
							var op = "deleteMulitPlaySong";
							var songList =[];
							for(var i = 0;i < songIdList.length;i++){
								var songName = $(songNameList[i]).text();
								var songId = $(songIdList[i]).val();
								var data = {
										songId:songId,
										songName:songName,
										songTime:null,
										clickCount:null,
										songStatus:null,
										songType:null,
										singer:null,
										songText:null,
										publishDate:null
								};
								songList.push(data);
							}
							removePlayList(songList,op);
						}
					})
				
				//评论按钮
	 			$("#commentBtn").click(function() {
					var songId = $("#playSongId").val();
					window.open("${pageContext.request.contextPath}/PlayListServlet?op=getSongComment&songId="+songId);

				}) 
				
				//-----歌词滚动----------
				var lrc = "";
	            function getLRC(lrc) {
	                var ajax = new XMLHttpRequest();
	                ajax.open("GET", "${pageContext.request.contextPath}/FileDownloadServlet?fileName=lrc/"+lrc);
	                ajax.onreadystatechange = function () {
	       
	                    // 判断响应是否完成：XMLHttpRequest 对象的 readystate属性值为4的时候
	                     if ( ajax.readyState === 4 ) {
	                         //再判断是否可用 ：XMLHttpRequest 对象的 status 属性为值 200
	                        if ( ajax.status === 200 ) {
	                            lrc = ajax.responseText;
	                            createLrcObj(lrc);
	                        } else {
	                           document.getElementById("lrclist").innerHTML = "<li class='on'><p>"+"暂无歌词"+"</p></li>";
	                        }
	                    }
	                };
	                ajax.send(null);
	            }
	            
	            var oLRC = {
	                ti: "", //歌曲名
	                ar: "", //演唱者
	                al: "", //专辑名
	                by: "", //歌词制作人
	                offset: 0, //时间补偿值，单位毫秒，用于调整歌词整体位置
	                ms: [] //歌词数组{t:时间,c:歌词}
	            };
	            function createLrcObj(lrc) {
	                if (lrc.length === 0) return;
	                var lrcs = lrc.split('\n');//用回车拆分成数组
	                for (var i in lrcs) {//遍历歌词数组
	                    if (lrcs.hasOwnProperty(i)) {
	                        lrcs[i] = lrcs[i].replace(/(^\s*)|(\s*$)/g, ""); //去除前后空格
	                        var t_lrc = lrcs[i].substring(lrcs[i].indexOf("[") + 1, lrcs[i].indexOf("]"));//取[]间的内容
	                        var s_text = t_lrc.split(":");//分离:号前后的文字
	                        if (isNaN(parseInt(s_text[0]))) { //不是数值，基本上是歌曲名、作者等信息
	                            for (var j in oLRC) {
	                                if (j !== "ms" && j === s_text[0].toLowerCase()) {
	                                    oLRC[j] = s_text[1];
	                                }
	                            }
	                        } else { //是数值，基本上就是歌词时间点
	                            var arr = lrcs[i].match(/\[(\d+:.+?)\]/g);//提取时间字段，可能有多个
	                            var start = 0;
	                            for (var lrc_position in arr) {
	                                if (arr.hasOwnProperty(lrc_position)) {
	                                    start += arr[lrc_position].length; //计算歌词位置
	                                }
	                            }
	                            var content = lrcs[i].substring(start);//获取歌词内容
	                            for (var k in arr) {
	                                if (arr.hasOwnProperty(k)) {
	                                    var t = arr[k].substring(1, arr[k].length - 1);//取[]间的内容
	                                    var s = t.split(":");//分离:前后文字
	                                    oLRC.ms.push({//对象{t:时间,c:歌词}加入ms数组
	                                        t: parseFloat(s[0].substr(0,2)) * 60 + parseFloat(s[1].substring(0,6)),//注意转换成number格式
	                                        // t: (parseFloat(s[0]) * 60 + parseFloat(s[1])).toFixed(3),
	                                        c: content
	                                    });
	                                }
	                            }
	                        }
	                    }
	                }
	                oLRC.ms.sort(function (a, b) {//按时间顺序排序
	                    return a.t - b.t;
	                });
	                // var lrc_result = "";
	                var lrcTime = [];//歌词对应的时间数组
			        var ul = $("#lrclist")[0];//获取ul
	                for (var n in oLRC.ms) {//遍历ms数组，把歌词加入列表
	                    // lrc_result += '<li>' + oLRC.ms[n].c + '</li>';
	                    // document.getElementById("lyric").innerHTML = lrc_result;
	                    ul.innerHTML += "<li><p>"+oLRC.ms[n].c+"</p></li>";//ul里填充歌词
	                }
	
	                for(var x=0;x< oLRC.ms.length; x++){
	                    lrcTime[x] = oLRC.ms[x].t;
	                }
	 
	                lrcTime[oLRC.ms.length] = lrcTime[oLRC.ms.length-1] + 3;//如不另加一个结束时间，到最后歌词滚动不到最后一句
	 
	                var $li = $("#lrclist>li");//获取所有li
	                var currentLine = 0;//当前播放到哪一句了
	                var currentTime;//当前播放的时间
	                var audio = document.getElementById("audio");
	                var ppxx;//保存ul的translateY值
	 
	                audio.ontimeupdate = function() {//audio时间改变事件
	                    currentTime = audio.currentTime;
	                    for (j=currentLine, len=lrcTime.length; j<len; j++){ // len=50
	                        if (currentTime<lrcTime[j+1] && currentTime>lrcTime[j]){
	                            currentLine =  j;
	                            // ppxx = 250-(currentLine*32);
	                            ppxx = 175-currentLine*32;
	                            ul.style.transform = "translateY("+ppxx+"px)";
	                            $li.get(currentLine-1).className="";
	                            // console.log("on"+currentLine);
	                            $li.get(currentLine).className="on";
	                            break;
	                        }
	                    }
	                };
	                  audio.onseeked = function() {//audio进度更改后事件
	                    currentTime = audio.currentTime;
	                    $li.get(currentLine).className="";
	                    for (k=0, len=lrcTime.length; k<len; k++){
	                        if (currentTime<lrcTime[k+1] && currentTime<lrcTime[k]){
	                            currentLine =  k;
	                            break;
	                        }
	                    }
	                }; 
	            }
		
		</script>

		<a href="javascript:;" class="btn_bottom_feedback js_btn_feedback" style="display:none;"></a>
		<audio id="audio" height="0" width="0" src="" />
			
		</audio>
	</body>

</html>